<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
onMounted(() => {
    console.log(useRoute().fullPath);
    useRouter().push(useRoute().fullPath)
    switch (useRoute().fullPath) {
        case '/start':
            active.value = 0
            break;
        case '/classification':
            active.value = 1
            break;
        case '/car':
            active.value = 2
            break;
        case '/user':
            active.value = 3
            break;
        default:
            break;
    }
})
const active = ref(0);
const onChange = (event) => {
    console.log(event);
    active.value = event
}
</script>

<template>
    <RouterView />
    <van-tabbar v-model="active" active-color="#07c160" @change="onChange($event)">
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o" to="/classification">分类</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o" to="/car" badge="5">购物车</van-tabbar-item>
        <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
    </van-tabbar>
</template>

<style scoped>
.van-tabbar {
    box-shadow: -5px 3px 4px 4px black;
}
</style>